/**
 * Created by wei on 17/11/29.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import "./css/publish.css";
import base from '../base.js';
const basePath = base().basePath;


class DivFixShow extends Component{


    constructor(props){
        super(props);
        this.state = {
            loading: false,
            visible: this.props.visible,
        }
    }

    componentWillReceiveProps(nextProps){
        const {visible} = nextProps;
        this.setState({
            visible: visible,
        });
    }


    showLoading(){
        if(this.state.loading){
            return (
                <div style={{position:'absolute', top:'130px', left:'190px', zIndex:1100}}>
                    <img src="/images/loading.gif" width={40} height={40}/>
                </div>
            );
        }
    }


    close(){
        const {close} = this.props;
        close();
    }


    render(){
        return (
            <div style={this.state.visible ? {display:'block'} : {display:'none'} }>
                <div className="p-sign-in-box p-model p-fadeInUp p-animated">
                    <div style={{position:'absolute', top:'5px', right:'5px'}}>
                        <a href="javascript:void(0)" onClick={()=>this.close()}><img src="/images/close.png" width={20} height={20}/></a>
                    </div>
                    <div className="p-sigin-left">
                        {this.showLoading()}
                        {React.Children.map(this.props.children, function (child) {
                            return child;
                        })}
                    </div>
                </div>
                <div className="p-shade" style={this.state.loading ? {zIndex:1501} : {}}></div>
            </div>
        );
    }

}

DivFixShow.propTypes = {
    visible: PropTypes.bool.isRequired,
    close: PropTypes.func.isRequired,
};

export default DivFixShow;